<template>
    <div class="main-container">
        <div style="background-color: #fff; height:100%" id="BaseInfoSetting">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="布类资料" key="1" v-if="permissionStore.hasPermisson('cpjczl.blzl')">
                    <div style="height: 100%;">
                        <ClothInfo></ClothInfo>
                    </div>
                </a-tab-pane>

                <a-tab-pane title="坯布颜色属性" key="5" v-if="permissionStore.hasPermisson('cpjczl.pbyssx')">
                    <div style="height: 100%;">
                        <ClothColorAttribute></ClothColorAttribute>
                    </div>
                </a-tab-pane>

                <a-tab-pane title="纱线类别" key="7" v-if="permissionStore.hasPermisson('cpjczl.sxlb')">
                    <div style="height: 100%;">
                        <TypeYarn></TypeYarn>
                    </div>
                </a-tab-pane>

                <a-tab-pane title="组织排针列表" key="13" v-if="permissionStore.hasPermisson('cpjczl.zzpzlb')">
                    <div style="height: 100%;">
                        <GroupPZList></GroupPZList>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="裁口排针列表" key="14" v-if="permissionStore.hasPermisson('cpjczl.ckpzlb')">
                    <div style="height: 100%;">
                        <CKPZList></CKPZList>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="通用排三角" key="15" v-if="permissionStore.hasPermisson('cpjczl.typsj')">
                    <div id="a1" style="height: 100%;">
                        <PSJList></PSJList>
                    </div>
                </a-tab-pane>

                <a-tab-pane title="坯布功能组织" key="18" v-if="permissionStore.hasPermisson('cpjczl.pbgnzz')">
                    <div style="height: 100%;">
                        <GermClothInfo></GermClothInfo>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="面料种类" key="19" v-if="permissionStore.hasPermisson('cpjczl.mlzl')">
                    <div style="height: 100%;">
                        <FabricInfo></FabricInfo>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="纱支比例范围" key="21" v-if="permissionStore.hasPermisson('cpjczl.szblfw')">
                    <div style="height: 100%;">
                        <YarnCountRatioRange></YarnCountRatioRange>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="坯布编号对照" key="22" v-if="permissionStore.hasPermisson('cpjczl.wjgylhpbbhdz')">
                    <div style="height: 100%;">
                        <ExternalprocessRawmaterials></ExternalprocessRawmaterials>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="坯布总路数设置" key="23">
                    <div style="height: 100%;">
                        <zbdfg></zbdfg>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import emitter from '@/hooks/useEventBus'
import usePermission from '@/store/modules/permission'
import zbdfg from './components/zbdfg.vue'

export default defineComponent({
    name: 'GrayFabricInformation',
    setup() {

        const pageData = reactive({
            tableIndex: "1"
        })
        const permissionStore = usePermission()
        const tabsChange = (e: string | number) => {
            emitter.emit('window-change')
            if (e === '1') {
                emitter.emit('ClothInfo')
            } else if (e === '2') {
                emitter.emit('ProductInfo')
            } else if (e === '3') {
                emitter.emit('BrandInfo')
            } else if (e === '4') {
                emitter.emit('ColorInformation')
            } else if (e === '5') {
                emitter.emit('ClothColorAttribute')
            } else if (e === '6') {
                emitter.emit('Categoriesofyarncount')
            } else if (e === '7') {
                emitter.emit('TypeYarn')
            } else if (e === '8') {
                emitter.emit('Rawmaterialcategory')
            } else if (e === '9') {
                emitter.emit('MaterialGrade')
            } else if (e === '10') {
                emitter.emit('MaterialLossRate')
            } else if (e === '11') {
                emitter.emit('RawMaterialComposition')
            } else if (e === '12') {
                emitter.emit('NeedleCylinderEquipment')
            } else if (e === '13') {
                emitter.emit('GroupPZList')
            } else if (e === '14') {
                emitter.emit('CKPZList')
            } else if (e === '15') {
                emitter.emit('PSJList')
            } else if (e === '16') {
                emitter.emit('GreyClothMachine')
            } else if (e === '17') {
                emitter.emit('NumberNeedles')
            } else if (e === '18') {
                emitter.emit('GermClothInfo')
            } else if (e === '19') {
                emitter.emit('FabricInfo')
            }else if (e === '21') {
                emitter.emit('YarnCountRatioRange')
            }else if (e === '22') {
                emitter.emit('ExternalprocessRawmaterials')
            }

        }
        return {
            pageData,
            tabsChange,
            permissionStore
        }
    },
    components:{
        zbdfg
    }
})
</script>
<style scoped>
.main-container {
    height: 100%;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>